<template>
  <div class="container box">
    <div class="left-box">
      <div class="title">{{ secretList.secret.title }}</div>
      <div class="userinfo-box">
        <div class="block">
          <el-avatar shape="square"  size="large" :src="require('@/assets/avator/'+secretList.avatar)"></el-avatar>
          <div style="margin-left: 10px;">{{secretList.username}}</div>
        </div>
        <div class="btns">
          <el-button type="primary" plain @click="showChat(secretList.secret.userid)" v-show="!showbtn"><i class="el-icon-chat-square"></i>私聊</el-button>
        </div>
      </div>
      <div class="content-box">
        <div class="wenzi">
          {{ secretList.secret.content }}
            <div class="time">发布于：{{ secretList.secret.publishtime }} 文章类型：{{ secretList.secret.type }} </div>
        </div>
        
      </div>
      <div class="content-footer">
        <div class="top-btn">
          <!-- <div :class="showComment?'bot-btn btn-active':'bot-btn'" @click="handleComment">文章详情</div> -->
          <!-- <div :class="!showComment?'bot-btn btn-active':'bot-btn'" @click="handleProtect">宣传栏</div> -->
        </div>
        <div class="comment-box" v-show="showComment">
          <el-button plain @click="handleAgree" :type="isLike?'primary':''" :disabled="like">同意({{ secretList.secret.agree }})</el-button>
          <el-button plain @click="handleDisagree" :type="IsDislike?'primary':''" :disabled="dislike">不同意({{secretList.secret.disagree}})</el-button>
          <el-button plain @click="handleCollect" :type="isCollect?'primary':''">
            <i class="el-icon-star-off" v-if="!isCollect"></i><i class="el-icon-star-on" v-if="isCollect"></i>
            收藏
          </el-button>
        </div>
        <div class="protect-box" v-show="!showComment">保护环境，人人有责</div>
      </div>
    </div>
    <div class="right-box">
      <AboutUser :userid="userid" :authorInfo="authorInfo"></AboutUser>
    </div>
  </div>
</template>

<script>
import {GetAuthorInfo,GetSecretDetail,IsLikedSecret,IsCollectedSecret,IsDislikeSecret,CancelIsLikedSecret,CancelIsDislikeSecret,CollectSecret,CancelCollectSecret} from '../../request/api'
import { mapState,mapActions,mapMutations } from 'vuex'
import AboutUser from '@/components/high/aboutUser.vue'
export default {
  data(){
    return{
      showComment:true,
      params:{
        secretid:this.$route.query.secretid,
      },
      secretList:{
        avatar:'admin.jpg',
        fishage:null,
        userid:null,
        username:'',
        secret:{
          content:'',
          userid:'',
          secretid:'',
          publishtime:'',
          type:'',
          title:'',
          agree:0,
          disagree:0
        }
      },
      isLike:false,
      IsDislike:false,
      isCollect:false,
      userid:null,
      authorParams:{
        userid:null
      },
      authorInfo:{},
      like:false,
      dislike:false,
    }
  },
  computed:{
    showbtn(){
      return this.$route.query.userid == sessionStorage.getItem('userid')
    }
  },
  components:{
    AboutUser
  },
  methods:{
    ...mapActions({
      asyncChangeIsShowToast:'toastStatus/asyncChangeIsShowToast'
    }),
    ...mapMutations({
      setShowChat:'chatStatus/setShowChat'
    }),
    handleComment(){
      // 改变showComment的值
      this.showComment = true
    },
    handleProtect(){
      // 改变showComment的值
      this.showComment = false
    },
    async handleAgree(){
      if(!this.isLike){
        // 发送请求
        await IsLikedSecret(this.params)
        // console.log("res agree",res)
        // 修改样式
        this.isLike = true
        // 修改数据
        this.secretList.secret.agree++
        this.dislike = true
      }else{
        // 取消点赞
        await CancelIsLikedSecret(this.params)
        // 修改数据
        this.isLike = false
        // 修改样式
        this.secretList.secret.agree--
        this.dislike = false
      }
    },
    async handleDisagree(){
      if(!this.IsDislike){
       await IsDislikeSecret(this.params)
       this.IsDislike = true 
       this.secretList.secret.disagree++
       this.like = true
      }else{
        await CancelIsDislikeSecret(this.params)
        this.IsDislike = false
        this.secretList.secret.disagree--
        this.like = false
      }
    },
    async handleCollect(){
      if(!this.isCollect){
        await CollectSecret(this.params)
        this.isCollect = true
        // 提示成功
        this.asyncChangeIsShowToast({
          type:'success',
          msg:'收藏成功'
        })
      }else{
        // 取消收藏 
        await CancelCollectSecret(this.params)
        this.isCollect = false
        this.asyncChangeIsShowToast({
          type:'success',
          msg:'取消收藏成功'
        })
      }
    },
    showChat(targetUserid){
      this.setShowChat(true)
    }
  },
  async created(){
    let res = await GetSecretDetail(this.params)
    this.secretList = res.data.data
    this.userid = this.secretList.secret.userid
    // console.log("userid1233  ``",this.userid)
    let res1 = await IsCollectedSecret(this.params)
    this.isCollect = res1.data.data
    // 获取作者信息
    // console.log("获取作者信息")
    this.authorParams.userid = this.secretList.secret.userid
    // console.log("获取作者信息",this.authorParams)
    let res2 = await GetAuthorInfo(this.authorParams)
    this.authorInfo = res2.data.data
    // console.log("获取",this.authorInfo)
  }
}
</script>
<style scoped>
.title{
  width: 100%;
  font-size: 28px;
  margin: 0 auto;
  text-align: center;
}
.container{
  background-color: white;
}
.box{
  display: flex;
  flex-direction: row;
}
.left-box{
  flex: 7;
  border: 1px solid #e3dede;
  background-color: rgb(244,246,249);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(158, 157, 157, 0.12);
  margin-right:16px;
}
.right-box{
  flex: 3;
  border: 1px solid #e3dede;
  margin-left: 10px;
  background-color: rgb(244,246,249);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(207, 206, 206, 0.12);
}
.userinfo-box{
  padding: 10px;
  position: relative;
}
.btns{
  position: absolute;
  right: 20px;
  top: 10px;
}
.block{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.content-box{
  padding: 10px;
}
.content-img{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin-top: 30px;
  margin-bottom: 20px;
}
.blogimg{
  width: 300px;
  height: 200px;
}
.wenzi{
  font-size: 16px;
  text-indent: 2em;
  line-height: 1.5;
}
.top-btn{
  display: flex;
  flex-direction: row;
  justify-content: start;
  margin-bottom: 10px;
  margin-left: 10px;
}
.bot-btn{
  /* width: 60px; */
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: large;
  margin-right: 10px;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid rgb(233,233,235);
  border-radius: 4px;
  background-color: white;
}
.bot-btn:hover{
  background-color: rgb(233,233,235);
  cursor: pointer;
}
.btn-active{
  background-color: rgb(233,233,235);
  cursor: pointer;
}
.comment-box{
  width: 100%;
  margin-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.info{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}
.time{
  font-size: 12px;
  color: #909399;
}
</style>
